<template>
  <div class="blog-content">
    <h1 style="text-align: center">{{newsPO.mainTitle}}</h1>
    <div v-html="newsPO.content"></div>
  </div>
</template>

<script setup>
import {getNewsDetailApi} from "@/apis/news.js";
import {ref} from 'vue';
import {useRoute} from 'vue-router';
// 在组件内部或者setup函数中使用
const route = useRoute();

// 在合适的地方获取newsId
const newsId = route.params.newsId;
const newsPO = ref("")
const getNewsFun = () => {
  getNewsDetailApi(newsId).then(res => {
    newsPO.value = res.data
  })
}

getNewsFun()
</script>

<style lang="scss">
body {
  background-color: #f5f5f5;
}

.blog-content {
  width: 60%;
  margin: 0 auto;
  min-height: 600px;
  background-color: #fff;
  padding: 20px 0;
}
</style>
